<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: CSS Tweening Example</title>

	<link rel="stylesheet" href="assets/demoStyles.css" />
	<script type="text/javascript" src="./assets/easeljs-NEXT.min.js"></script> <!-- included for Ticker -->

	<!-- Note: All core TweenJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>

	<script type="text/javascript" src="../src/tweenjs/CSSPlugin.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>

	var colorSeed = 0;

	function init() {
	    if (window.top != window) {
			document.getElementById("header").style.display = "none";
	    }

		createjs.CSSPlugin.install(createjs.Tween);

		createjs.Ticker.setFPS(20);
		var count = 600;
		while (--count >= 0) {
			var box = document.createElement("div");
			box.style.width = "6px";
			box.style.height = "2px";
			box.style.position = "absolute";
			box.style.borderRadius = "2px";
			box.style.backgroundColor = "#0F0";
			document.body.appendChild(box);
			var a = (Math.random()*Math.PI*2*16|0)/16;
			box.style.webkitTransform = "rotate("+a+"rad)";
			var d = 30;
			box.style.left = window.innerWidth/2+Math.cos(a-0.2-Math.random())*d+"px";
			box.style.top = window.innerHeight/2+Math.sin(a-0.2-Math.random())*d+"px";
			d = (Math.min(window.innerWidth,window.innerHeight)-16)/2*(Math.random()*0.3+0.7);
			var x = window.innerWidth/2+Math.cos(a)*d;
			var y = window.innerHeight/2+Math.sin(a)*d;
			createjs.Tween.get(box, {loop:true}, true).set({opacity:"0"},box.style).wait(Math.random()*1000+1|0).call(updateColor).to({top:y,left:x,width:16,height:4,opacity:1},Math.random()*1500+1000,easeIn);
		}
		// tween the base color that divs will be assigned when they start moving:
		createjs.Tween.get(this,{loop:true}).to({colorSeed:360},5000);
	}

	function updateColor(tween) {
		// grab the tween's target (the style object), and update it's color
		tween._target.style.backgroundColor = "hsl("+(Math.random()*60+colorSeed|0)+",100%,50%)";
	}

	// very simple easing equation:
	function easeIn(ratio) {
		return ratio*ratio;
	}

	</script>
</head>

<body onload="init();" style="background-color:#111111">

	<header id="header" class="TweenJS">
	    <h1><span class="text-product">Tween<strong>JS</strong></span> CSS Plugin Example</h1>
	    <p>This example shows how a plugin can be used to override values in TweenJS. The CSSPlugin ensures the CSS position and size parameters all receive the "px" suffix required by CSS.</p>
	</header>

</body>
</html>
